<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>烟草订购助手 - 设置</title>
    <link rel="stylesheet" href="../styles/options.css">
</head>

<body>
    <div class="container">
        <header class="header">
            <div class="header-content">
                <img src="../icons/icon48.svg" alt="插件图标" class="logo">
                <div class="header-text">
                    <h1>烟草订购助手</h1>
                    <p>个性化设置</p>
                </div>
            </div>
        </header>

        <main class="main-content">
            <div class="settings-section">
                <h2>基本设置</h2>
                <div class="setting-group">


                    <div class="setting-item">
                        <div class="setting-info">
                            <label for="highlight">高亮显示重要信息</label>
                            <p class="setting-desc">高亮显示总额、提交按钮等重要元素</p>
                        </div>
                        <div class="setting-control">
                            <label class="switch">
                                <input type="checkbox" id="highlight">
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>

                    <div class="setting-item">
                        <div class="setting-info">
                            <label for="quickFillEnabled">启用快速填充</label>
                            <p class="setting-desc">允许使用快速填充功能</p>
                        </div>
                        <div class="setting-control">
                            <label class="switch">
                                <input type="checkbox" id="quickFillEnabled">
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>

                    <div class="setting-item">
                        <div class="setting-info">
                            <label for="notificationsEnabled">启用通知</label>
                            <p class="setting-desc">显示操作完成通知</p>
                        </div>
                        <div class="setting-control">
                            <label class="switch">
                                <input type="checkbox" id="notificationsEnabled">
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>

                    <div class="setting-item">
                        <div class="setting-info">
                            <label for="keyboardShortcuts">键盘快捷键</label>
                            <p class="setting-desc">启用键盘快捷键支持</p>
                        </div>
                        <div class="setting-control">
                            <label class="switch">
                                <input type="checkbox" id="keyboardShortcuts">
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="settings-section">
                <h2>高级设置</h2>
                <div class="setting-group">
                    <div class="setting-item">
                        <div class="setting-info">
                            <label for="autoBackup">自动备份</label>
                            <p class="setting-desc">定期备份订单数据</p>
                        </div>
                        <div class="setting-control">
                            <label class="switch">
                                <input type="checkbox" id="autoBackup">
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>

                    <div class="setting-item">
                        <div class="setting-info">
                            <label for="theme">主题</label>
                            <p class="setting-desc">选择插件界面主题</p>
                        </div>
                        <div class="setting-control">
                            <select id="theme" class="select-control">
                                <option value="light">浅色主题</option>
                                <option value="dark">深色主题</option>
                                <option value="auto">跟随系统</option>
                            </select>
                        </div>
                    </div>

                    <div class="setting-item">
                        <div class="setting-info">
                            <label for="defaultQuantity">默认订购量</label>
                            <p class="setting-desc">快速填充时的默认数量</p>
                        </div>
                        <div class="setting-control">
                            <input type="number" id="defaultQuantity" class="number-control" min="1" max="1000"
                                value="10">
                        </div>
                    </div>
                </div>
            </div>

            <div class="settings-section">
                <h2>数据管理</h2>
                <div class="setting-group">
                    <div class="action-buttons">
                        <button id="exportSettings" class="btn btn-secondary">
                            <span class="btn-icon">📤</span>
                            导出设置
                        </button>
                        <button id="importSettings" class="btn btn-secondary">
                            <span class="btn-icon">📥</span>
                            导入设置
                        </button>
                        <button id="clearData" class="btn btn-danger">
                            <span class="btn-icon">🗑️</span>
                            清除所有数据
                        </button>
                    </div>
                </div>
            </div>

            <div class="settings-section">
                <h2>快捷键说明</h2>
                <div class="shortcut-list">
                    <div class="shortcut-item">
                        <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd>
                        <span>快速填充订单</span>
                    </div>
                    <div class="shortcut-item">
                        <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>A</kbd>
                        <span>全选商品</span>
                    </div>
                    <div class="shortcut-item">
                        <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd>
                        <span>清空订单</span>
                    </div>
                </div>
            </div>
        </main>

        <footer class="footer">
            <div class="footer-content">
                <div class="footer-left">
                    <button id="resetSettings" class="btn btn-outline">恢复默认设置</button>
                </div>
                <div class="footer-right">
                    <button id="saveSettings" class="btn btn-primary">保存设置</button>
                </div>
            </div>
        </footer>
    </div>

    <!-- 隐藏的文件输入 -->
    <input type="file" id="fileInput" accept=".json" style="display: none;">

    <script src="../src/options.js"></script>
</body>

</html>